<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员管理</title>
    <link href="../static/vendor/element-ui@2.15.9/lib/theme-chalk/index.css" rel="stylesheet" />
    <link href="../static/eladmin/css/eladmin.min.css" rel="stylesheet" />
</head>

<body>
    <div id="app" class="list-page dark-theme p-3" v-cloak>
        <el-row :gutter="15">
            <el-col :span="6">
                <el-card>
                    <div slot="header">用户</div>
                    <div>
                        今日新增: 0 人<br />
                        昨日新增: 0 人<br />
                        用户总数: 0 人
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <div slot="header">VIP会员</div>
                    <div>
                        今日新增: 0 人<br />
                        昨日新增: 0 人<br />
                        会员总数: 0 人
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <div slot="header">订单</div>
                    <div>
                        今日新增: 0 单<br />
                        昨日新增: 0 单<br />
                        累计订单: 0 单
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <div slot="header">志愿表</div>
                    <div>
                        今日新增: 0 个<br />
                        昨日新增: 0 个<br />
                        累计数量: 0 个
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="15" class="mt-2">
            <el-col :span="12">
                <el-card>
                    <div slot="header" class="clearfix">图表1</div>
                    <line-chart></line-chart>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card>
                    <div slot="header" class="clearfix">图表2</div>
                    <line-chart></line-chart>
                </el-card>
            </el-col>
        </el-row>
    </div>

    <script src="../static/vendor/vue@2.6.14/dist/vue.min.js"></script>
    <script src="../static/vendor/element-ui@2.15.9/lib/index.js"></script>
    <script src="../static/vendor/chart.js@3.8.0/dist/chart.min.js"></script>
    <script src="../static/vendor/axios@0.27.2/dist/axios.min.js"></script>
    <script src="../static/vendor/mockjs@1.1.0/dist/mock.js?v=1.0.0"></script>
    <script src="../static/js/utils.min.js"></script>
    <script src="../static/mock/admin/api-route.js?v=1.0.0"></script>
    <script src="../static/mock/admin/index.js?v=1.0.0"></script>
    <script src="../static/eladmin/js/elcomponents.min.js"></script>
    <script>
        // 使用模拟数据
        useMockData();

        /**
         * 管理员管理页面
         */
        const App = {
            el: '#app',
            name: "Main",
        };
        // 全局加载组件
        Vue.use(ElComponents);
        Vue.prototype.apiRoute = new ApiRoute();
        // 获取标准消息格式的 axios 实例
        Vue.prototype.vuiAjax = EsUtils.getStdAjax();

        Vue.component('LineChart', {
            name: "LineChart",
            props: {
                width: {
                    type: String,
                    default: "200px",
                },
                height: {
                    type: String,
                    default: "200px",
                },
            },
            methods: {},
            mounted() {
                new Chart(this.$refs.canvas.getContext("2d"), {
                    type: "bar",
                    data: {
                        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                        datasets: [
                            {
                                label: "# of Votes",
                                data: [12, 19, 3, 5, 2, 3],
                                backgroundColor: [
                                    "rgba(255, 99, 132, 0.2)",
                                    "rgba(54, 162, 235, 0.2)",
                                    "rgba(255, 206, 86, 0.2)",
                                    "rgba(75, 192, 192, 0.2)",
                                    "rgba(153, 102, 255, 0.2)",
                                    "rgba(255, 159, 64, 0.2)",
                                ],
                                borderColor: [
                                    "rgba(255,99,132,1)",
                                    "rgba(54, 162, 235, 1)",
                                    "rgba(255, 206, 86, 1)",
                                    "rgba(75, 192, 192, 1)",
                                    "rgba(153, 102, 255, 1)",
                                    "rgba(255, 159, 64, 1)",
                                ],
                                borderWidth: 1,
                            },
                        ],
                    },
                    options: {
                        scales: {
                            yAxes: [
                                {
                                    ticks: {
                                        beginAtZero: true,
                                    },
                                },
                            ],
                        },
                    },
                });
            },
            template: `<canvas ref="canvas" :width="width" :height="height"></canvas>`
        })
        // 创建应用实例
        var app = new Vue(App)
    </script>
</body>

</html>